<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
	<meta name="description" content=""/>
	<meta name="author" content=""/>
	<link rel="icon" href="${pageContext.request.contextPath}/static/images/favicon.ico"/>
	<title>JS二维码</title>
	<!-- Bootstrap core CSS -->
	<link href="${pageContext.request.contextPath}/static/dist/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
	<link href="${pageContext.request.contextPath}/static/dist/css/bootstrap-grid.css" type="text/css" rel="stylesheet"/>
	<link href="${pageContext.request.contextPath}/static/dist/css/bootstrap-reboot.css" type="text/css" rel="stylesheet"/>
	<%--<link href="${pageContext.request.contextPath}/static/bootstrap-colorpicker/css/bootstrap-colorpicker.css" type="text/css" rel="stylesheet"/>--%>
	<link href="${pageContext.request.contextPath}/static/color-picker/git-Simonwep-pickr/dist/pickr.min.css" type="text/css" rel="stylesheet"/>
	<link href="${pageContext.request.contextPath}/static/dist/zaddcss/zaddindex.css" type="text/css" rel="stylesheet"/>
	<style type="text/css">
		input[name='okey']{
			width:10%;
			border-radius:5px;
			border:solid rgb(227, 227, 227);
		}
		input[name='otext']{
			width:80%;
			border-top:none;
			border-left:none;
			border-right:none;
			border-bottom:solid rgb(227, 227, 227);
		}
		input[name='result']{
			width:80%;
			border-top:none;
			border-left:none;
			border-right:none;
			border-bottom:solid rgb(227, 227, 227);
		}
		input[name='deviceNum']{
			width:30%;
			border-top:none;
			border-left:none;
			border-right:none;
			border-bottom:solid rgb(227, 227, 227);
		}
		input[name='deviceSN']{
			width:30%;
			border-top:none;
			border-left:none;
			border-right:none;
			border-bottom:solid rgb(227, 227, 227);
		}
		input[name='deviceOriNum']{
			width:30%;
			border-top:none;
			border-left:none;
			border-right:none;
			border-bottom:solid rgb(227, 227, 227);
		}
		.blockArea{
			border:5px solid white;
			border-radius:10px;
		}
		.colorhex{
			width:80px;
		}
		input{
			border-radius:5px;
		}
	</style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
	<a class="navbar-brand" href="javascript:void(0);">Never expand</a>
	<a class="nav-link" href="javascript:void(0);">Home <span class="sr-only">(current)</span></a>
	<a class="nav-link" href="javascript:void(0);">Link</a>
	<a class="nav-link disabled" href="javascript:void(0);">Disabled</a>
	<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
	<div class="dropdown-menu" aria-labelledby="dropdown06">
		<a class="dropdown-item" href="javascript:void(0);">Action</a>
		<a class="dropdown-item" href="javascript:void(0);">Another action</a>
		<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
	</div>
	<form class="form-inline my-2 my-md-0" action="javascript:void(0);">
		<label>
			<input class="form-control" type="text" placeholder="Search"/>
		</label>
	</form>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
		QA<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarsExample01">
		<p>1234567489123456798</p>
		<p>1234567489123456798</p>
		<p>1234567489123456798</p>
		<p>1234567489123456798</p>
	</div>
</nav>
<main role="main">
	<section class="jumbotron text-center">
		<div class="container">
			<h3 class="jumbotron-heading">二维码生成</h3>
		</div>
	</section>
	<div class="album py-3 bg-light">
		<div class="container">
			<%--是否勾选了兴邦专用--%>
			<div class="form-check form-check-inline">
				<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked>
				<label class="form-check-label" for="inlineRadio1">兴邦设备专用</label>
			</div>
			<div class="form-check form-check-inline">
				<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
				<label class="form-check-label" for="inlineRadio2">普通模式</label>
			</div>
			<div class="form-check form-check-inline">
				<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
				<label class="form-check-label" for="inlineRadio3">预留模式(不可用)</label>
			</div>
			<%--是否勾选了兴邦专用 end--%>
			<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
				<div class="col p-4 d-flex flex-column position-static">
					<%--内容区域 start --%>
					<%--颜色选择--%>
					<div class="blockArea">
						<label for="qrWidth">二维码尺寸(px)
							<input id="qrWidth" value="280" style="width:50px" type="number" step="1"/>
						</label>
						<label for="qrBorderWidth">边框宽度(px)
							<input id="qrBorderWidth" value="10" style="width:50px" type="number" step="1"/>
						</label>
						<label for="qrBorderHeight">边框高度(px)
							<input id="qrBorderHeight" value="10" style="width:50px" type="number" step="1"/>
						</label>
						<label style="margin-left:20px" id="qrSize">尺寸：300*300</label><br>
						<label for="qrContentColor">
							<input id="qrContentColor" type="text" value="" readonly/>
						</label>
						<label for="qrContentColorHex">内容色 HEX：
							<input id="qrContentColorHex" class="colorhex" value="#000000" type="text"/>
						</label>
						<label for="qrContentColorRgb">RGB：
							<input id="qrContentColorRgb" value="rgba(0, 0, 0, 1.0)" type="text"/>
						</label><br>
						<%------------------------%>
						<label for="qrBgColor">
							<input id="qrBgColor" type="text" value="" readonly/>
						</label>
						<label for="qrBgColorHex">背景色 HEX：
							<input id="qrBgColorHex" class="colorhex" value="#FFFFFF" type="text"/>
						</label>
						<label for="qrBgColorRgb">RGB：
							<input id="qrBgColorRgb" value="rgba(255, 255, 255, 1.0)" type="text"/>
						</label><br>
						<%------------------------%>
						<label for="qrBorderColor">
							<input id="qrBorderColor" type="text" value="" readonly/>
						</label>
						<label for="qrBorderColorHex">边框色 HEX：
							<input id="qrBorderColorHex" class="colorhex" value="#FFFFFF" type="text"/>
						</label>
						<label for="qrBorderColorRgb">RGB：
							<input id="qrBorderColorRgb" value="rgba(255, 255, 255, 1.0)" type="text"/>
						</label><br>
						<label for="qrCorrectLevel">纠错级别：</label>
						<select id="qrCorrectLevel" style="width: 10%;border-radius:5px">
							<option value="1">L(低)</option>
							<option value="0" selected>M(中)</option>
							<option value="3">Q(高)</option>
							<option value="2">H(优)</option>
						</select>
						<label for="qrImgType">图片格式：</label>
						<select id="qrImgType" style="width: 10%;border-radius:5px">
							<option value="bmp" >bmp</option>
							<option value="png">png</option>
							<option value="jpg" selected>jpg</option>
							<option value="tif">tif</option>
						</select>
					</div>
					<br>
					<%--服务器信息--%>
					<div class="blockArea">
						<p>
							<label for="serverAddrList">服务器地址：</label>
							<select id="serverAddrList" style="width: 40%;border-radius:5px">
								<option value="1.singbon.com" selected>1.singbon.com</option>
								<option value="smartschool.singbon.com">smartschool.singbon.com</option>
								<option value="a2.4000063966.com">a2.4000063966.com</option>
								<option value="chongdian.4000063966.com">chongdian.4000063966.com</option>
								<option value="qisong.4000063966.com">qisong.4000063966.com</option>
							</select>
						</p>
						<label>二维码内容：
							<input name="deviceNum" type="text" value="1" placeholder="1" aria-placeholder="1"/>
						</label>
						<div class="bd-example">
							<button id="makeQr" type="button" class="btn btn-primary">生成二维码</button>
							<button id="Download" type="button" class="btn btn-primary">下载二维码</button>
						</div>
					</div>
					<%--上传excel--%>
					<<%--div class="blockArea">
						<input type="file" name="xlfile" value="选择文件" id="xlf"/>
						<button id="inputGroupFileAddon04" type="button" class="btn btn-primary">批量生成</button>
						<br>
						&lt;%&ndash;						<div class="input-group">&ndash;%&gt;
						&lt;%&ndash;							<div class="custom-file">&ndash;%&gt;
						&lt;%&ndash;								<input type="file" class="custom-file-input" name="xlfile" id="xlf" aria-describedby="def">&ndash;%&gt;
						&lt;%&ndash;								<label class="custom-file-label" for="xlf">点我选择文件</label>&ndash;%&gt;
						&lt;%&ndash;							</div>&ndash;%&gt;
						&lt;%&ndash;							<div class="input-group-append">&ndash;%&gt;
						&lt;%&ndash;								<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">批量生成</button>&ndash;%&gt;
						&lt;%&ndash;							</div>&ndash;%&gt;
						&lt;%&ndash;						</div>&ndash;%&gt;
						使用 Web Workers: (如果支持)
						<label>
							<input type="checkbox" name="useworker" checked>
						</label>
						使用 readAsBinaryString: (如果支持)
						<label>
							<input type="checkbox" name="userabs" checked>
						</label>
					</div>--%>
					<%--<br>--%>
					<%--内容区域 end --%>
				</div>
				<%--二维码区域 start --%>
				<div class="col-auto d-none d-lg-block">
					<div id="qrcode" style="padding:10px;margin:10px;border: 0px solid #007bff;border-radius:5px;display:block;width:360px;height:360px;text-align:center;"></div>
				</div>
				<%--二维码区域 start --%>
			</div>
			<div id="batchQr"></div>
		</div>
	</div>
</main>
<footer class="text-muted" style="margin-top: -10px">
	<div class="container">
		<p class="float-right">
			<a href="javascript:void(0);">返回最上</a>
		</p>
		<p>示例页面 &copy; Bootstrap!</p>
		<p>
			<a href="https://github.com/zghnzch">访问我们的主页</a>
		</p>
	</div>
</footer>
<!-- region 引入js文件-->
<script src="${pageContext.request.contextPath}/static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-4.2.1/site/docs/4.2/assets/js/vendor/bs-custom-file-input.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dist/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dist/js/bootstrap.bundle.min.js"></script>
<script src="${pageContext.request.contextPath}/static/color-picker/git-Simonwep-pickr/dist/pickr.es5.min.js"></script>
<script src="${pageContext.request.contextPath}/static/color-picker/git-Simonwep-pickr/gh-page/js/script.js"></script>
<script src="${pageContext.request.contextPath}/static/dist/zaddjs/encrypt/src/core.js"></script>
<script src="${pageContext.request.contextPath}/static/dist/zaddjs/encrypt/src/cipher-core.js"></script>
<script src="${pageContext.request.contextPath}/static/dist/zaddjs/encrypt/src/tripledes.js"></script>
<script src="${pageContext.request.contextPath}/static/dist/zaddjs/encrypt/src/mode-ecb.js"></script>
<script src="${pageContext.request.contextPath}/static/crypto-js-develop/src/myself-need.js"></script>
<script src="${pageContext.request.contextPath}/static/dist/zaddjs/copyContent/copyContent.js"></script>
<script src="${pageContext.request.contextPath}/static/js/qr/qrcodejs-555chy/qrcodejs-master/qrcode.js" type="text/javascript"></script>
<!-- endregion 引入js文件-->
<!-- region 元素定义--------------->
<script>
	let qrContentColor = $('#qrContentColor');
	let qrContentColorHex = $("#qrContentColorHex");
	let qrContentColorRgb = $("#qrContentColorRgb");
	/*------------------*/
	let qrBgColor = $('#qrBgColor');
	let qrBgColorHex = $("#qrBgColorHex");
	let qrBgColorRgb = $("#qrBgColorRgb");
	/*------------------*/
	let qrBorderColor = $('#qrBorderColor');
	let qrBorderColorHex = $("#qrBorderColorHex");
	let qrBorderColorRgb = $("#qrBorderColorRgb");
	/*------------------*/
	//设备号码
	let eleInputNameDeviceNum = $("input[name='deviceNum']");
	let excelNum = '';
	let excelNums = '';
	/*------------------------*/
	let eleServerAddrList = $("#serverAddrList");
	let eleQrWidth = $("#qrWidth");
	let eleQrBorderWidth = $("#qrBorderWidth");
	let eleQrBorderHeight = $("#qrBorderHeight");
	let eleQrCorrectLevel = $("#qrCorrectLevel");
	let isSingbon = $("#inlineRadio1");
	let isCommon = $("#inlineRadio2");
	let inlineRadio3 = $("#inlineRadio3");
	let qrGlobal = undefined;
	let eleqrSize = $('#qrSize');
	/*------------------------*/
</script>
<!-- endregion 元素定义--------------->
<%--$(function () {});--%>
<script>
	$(function(){
		/*颜色选择器picolor-------------------------------------*/
		pickrqrContentColor.on('save',(args)=>{
			qrContentColorRgb.val(args.toRGBA().toString());
			qrContentColorHex.val(args.toHEX().toString());
			makeQrOnDiv("qrcode",true,qrContent(eleInputNameDeviceNum.val()));
		});
		pickrqrBgColor.on('save',(args)=>{
			qrBgColorRgb.val(args.toRGBA().toString());
			qrBgColorHex.val(args.toHEX().toString());
			makeQrOnDiv("qrcode",true,qrContent(eleInputNameDeviceNum.val()));
		});
		pickrqrBorderColor.on('save',(args)=>{
			qrBorderColorRgb.val(args.toRGBA().toString());
			qrBorderColorHex.val(args.toHEX().toString());
			makeQrOnDiv("qrcode",true,qrContent(eleInputNameDeviceNum.val()));
		});
		// 纠错级别 select
		eleQrCorrectLevel.on('change',function(event){
			makeQrOnDiv("qrcode",true,qrContent(eleInputNameDeviceNum.val()));
		});
		// 内容模式 是否要加密
		isSingbon.on('change',function(event){
			makeQrOnDiv("qrcode",true,qrContent(eleInputNameDeviceNum.val()));
		});
		isCommon.on('change',function(event){
			makeQrOnDiv("qrcode",true,qrContent(eleInputNameDeviceNum.val()));
		});
		eleServerAddrList.on('change',function(event){
			makeQrOnDiv("qrcode",true,qrContent(eleInputNameDeviceNum.val()));
		});
		eleQrWidth.on('input',function(event){
			calcQrSize();
			makeQrOnDiv("qrcode",true,qrContent(eleInputNameDeviceNum.val()));
		});
		eleQrBorderWidth.on('input',function(event){
			calcQrSize();
			makeQrOnDiv("qrcode",true,qrContent(eleInputNameDeviceNum.val()));
		});
		eleQrBorderHeight.on('input',function(event){
			calcQrSize();
			makeQrOnDiv("qrcode",true,qrContent(eleInputNameDeviceNum.val()));
		});
		/*---------------------------------*/
		// 单个生成二维码按钮
		let makeQr = document.getElementById("makeQr");
		makeQr.onclick = function(){
			let iconImgPath = "${pageContext.request.contextPath}/static/images/squareMyBike.jpg";
			makeQrOnDiv("qrcode",true,qrContent(eleInputNameDeviceNum.val()));
		};
		// 下载二维码按钮
		let Download = document.getElementById("Download");
		Download.onclick = function(){
			saveQrImg();
		};
		// 批量生成按钮
		let inputGroupFileAddon04 = document.getElementById("inputGroupFileAddon04");
		inputGroupFileAddon04.onclick = function(){
			if(excelNum==='' || excelNum.length<=0){
				alert("请先选择excel 文件！ ");
			}
			else{
				console.log("zch0:"+excelNum.indexOf("\n"));
				console.log("zch1:"+excelNum.replace(new RegExp("\n","gm"),"#"));
				excelNum = excelNum.replace(new RegExp("\n","gm"),"#");
				excelNums = excelNum.split("#");
				//for(var i in excelNums){
				console.log("zch2:"+excelNums.length);
				for(let i = 0; i<excelNums.length; i++){
					console.log("批量内容:"+excelNums[i]);
					console.log("zch3:"+excelNums[i].length);
					if(excelNums[i].length>=1){
						makeQrOnDiv("batchQr",false,qrContent(excelNums[i]));
					}
				}
			}
		}
	})
</script>
<%--方法区--%>
<script type="text/javascript">
	function saveQrImg(){
		console.log("123456:::"+getSelectServerAddr("qrImgType").val());
		let oCanvas = $("canvas");
		// 获取图片资源
		for(let i = 0; i<oCanvas.length; i++){
			console.log(i);
			let img_data1 = oCanvas[i].toDataURL("image/"+getSelectServerAddr("qrImgType").val(),1.0);
			saveFile(img_data1,'qr.'+getSelectServerAddr("qrImgType").val());
		}
	}
	// 保存文件
	function saveFile(data,filename){
		var save_link = document.createElementNS('http://www.w3.org/1999/xhtml','a');
		save_link.href = data;
		save_link.download = filename;
		var event = document.createEvent('MouseEvents');
		event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
		save_link.dispatchEvent(event);
	}
	// 获取选择的select
	function getSelectServerAddr(selectId){
		let selectEle = $('#'+selectId+' option:selected');
		return selectEle;
	}
	// 获取选择的二维码容错级别
	function getCorrectLevel(){
		let level = parseInt(getSelectServerAddr("qrCorrectLevel").val());
		if(level===0){
			return QRCode.CorrectLevel.M;
		}
		else if(level===1){
			return QRCode.CorrectLevel.L;
		}
		else if(level===2){
			return QRCode.CorrectLevel.H;
		}
		else if(level===3){
			return QRCode.CorrectLevel.Q;
		}
		else{
			return QRCode.CorrectLevel.M;
		}
	}
	// 获取二维码内容
	function qrContent(txt){
		if(isSingbon.is(':checked')){
			let c = parseInt(txt).toString(16).toUpperCase();
			while(c.length<32){
				c = "0"+c;
			}
			let enResult = encryptByDES('ycsty',c);
			let enTxt = "http://"+getSelectServerAddr("serverAddrList").val()+"/qrdt.do?dsn="+enResult;
			return enTxt;
		}
		if(isCommon.is(':checked')){
			return txt;
		}
		if(inlineRadio3.is(':checked')){
			return "错误的类型";
		}
	}
	/**
	 * 生成二维码方法
	 * @param eleDivId 二维码依附的div 的id
	 * @param clean 生成前是否需要清空 div
	 * @param text  二维码内容
	 */
	function makeQrOnDiv(eleDivId,clean,text){
		let eleDiv = document.getElementById(eleDivId);
		if(clean){
			eleDiv.innerHTML = "";
		}
		qrGlobal = new QRCode(eleDiv,{
			text:text,
			width:eleQrWidth.val(),
			height:eleQrWidth.val(),
			colorDark:qrContentColorHex.val(),
			colorLight:qrBgColorHex.val(),
			correctLevel:getCorrectLevel(),
			iconSrc:"",
			/*内部图片的边框通过如下配置设置样式*/
			iconRadius:10,
			iconBorderWidth:3,
			iconBorderColor:"whiet",
			/*外部图片的边框通过如下配置设置样式*/
			borderWidth:parseInt(eleQrWidth.val())+parseInt(eleQrBorderWidth.val())+parseInt(eleQrBorderHeight.val()),
			borderHeight:parseInt(eleQrWidth.val())+parseInt(eleQrBorderWidth.val())+parseInt(eleQrBorderHeight.val()),
			// 边框图片 可以自定义的添加图片
			borderImg:"",
			borderBgColor:qrBorderColorHex.val(),
			qrcodeOffsetX:eleQrBorderWidth.val(),
			qrcodeOffsetY:eleQrBorderHeight.val(),
		});
	}
	// 计算总二维码大小
	function calcQrSize(){
		let size = parseInt(eleQrWidth.val())+parseInt(eleQrBorderWidth.val())+parseInt(eleQrBorderHeight.val());
		eleqrSize.text("尺寸："+size+"*"+size);
	}
</script>
<!--region excel 读取-------------------------------->
<script src="dist/cpexcel.js"></script>
<script src="shim.js"></script>
<script src="jszip.js"></script>
<script src="xlsx.js"></script>
<script>
	let X = XLSX;
	let XW = {
		/* worker message */
		msg:'xlsx',
		/* worker scripts */
		worker:'./xlsxworker.js'
	};
	let global_wb;
	let process_wb = (function(){
		let to_csv = function to_csv(workbook){
			let result = [];
			workbook.SheetNames.forEach(function(sheetName){
				let csv = X.utils.sheet_to_csv(workbook.Sheets[sheetName]);
				if(csv.length){
					result.push("SHEET: "+sheetName);
					result.push("");
					result.push(csv);
					// console.log("zch2:"+csv);
					excelNum = csv;
				}
			});
			return result.join("\n");
		};
		return function process_wb(wb){
			global_wb = wb;
			to_csv(wb);
			if(typeof console!=='undefined'){
				console.log("output",new Date());
			}
		};
	})();
	let setfmt = window.setfmt = function setfmt(){
		if(global_wb) process_wb(global_wb);
	};
	let do_file = (function(){
		let rABS = typeof FileReader!=="undefined" && (FileReader.prototype || {}).readAsBinaryString;
		let domrabs = document.getElementsByName("userabs")[0];
		if(!rABS) domrabs.disabled = !(domrabs.checked = false);
		let use_worker = typeof Worker!=='undefined';
		let domwork = document.getElementsByName("useworker")[0];
		if(!use_worker) domwork.disabled = !(domwork.checked = false);
		let xw = function xw(data,cb){
			let worker = new Worker(XW.worker);
			worker.onmessage = function(e){
				switch(e.data.t){
					case 'ready':
						break;
					case 'e':
						console.error(e.data.d);
						break;
					case XW.msg:
						cb(JSON.parse(e.data.d));
						break;
				}
			};
			worker.postMessage({d:data,b:rABS ? 'binary' : 'array'});
		};
		return function do_file(files){
			rABS = domrabs.checked;
			use_worker = domwork.checked;
			let f = files[0];
			let reader = new FileReader();
			reader.onload = function(e){
				if(typeof console!=='undefined'){
					console.log("onload1",new Date(),rABS,use_worker);
				}
				let data = e.target.result;
				if(!rABS){
					console.log("onload2",new Date(),rABS,use_worker);
					data = new Uint8Array(data);
				}
				if(use_worker){
					xw(data,process_wb);
				}
				else{
					process_wb(X.read(data,{type:rABS ? 'binary' : 'array'}));
				}
			};
			if(rABS) reader.readAsBinaryString(f);
			else reader.readAsArrayBuffer(f);
		};
	})();
</script>
<script>
	(function(){
		let xlf = document.getElementById('xlf');
		if(!xlf.addEventListener) return;
		function handleFile(e){
			do_file(e.target.files);
		}
		xlf.addEventListener('change',handleFile,false);
	})();
</script>
<!-- endregion excel 读取 end -->
</body>
</html>
